<!DOCTYPE html>
<html>
<head>
  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?libraries=visualization&key=AIzaSyCHrVbRcLwJjF-dm2v_A9C-TqBYtFB_7p4&sensor=false">
</script>

<script type="text/javascript">  

  function initialize() {
	// adding data points
	var heatmapData = [];
	
	var latitudes = [];
	var longitudes = [];
	var magnitudes= [];
	
	{% for data in points %}
		latitudes.push({{ data.gpPos.lat }}); 
		longitudes.push({{ data.gpPos.lon }}); 
	    magnitudes.push({{ data.measured_value }});
	{% endfor %}
	
	for ( var i = 0 ; i < latitudes.length; i++){
        var latLng = new google.maps.LatLng(latitudes[i], longitudes[i]);
        var weightedLoc = {
                  location: latLng,
                  weight: Math.pow(2, magnitudes[i])
                };
        heatmapData.push(weightedLoc);
    }
	
	var sanfrancisco = new google.maps.LatLng(37.785, -122.435);
    var myOptions = {
      zoom: 2,
      center: sanfrancisco,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var styles = [
				{
				    "stylers": [
				      { "visibility": "off" }
				    ]
				  },
                   {
                		    "featureType": "water",
                		    "elementType": "geometry",
                		    "stylers": [
                		      { "visibility": "on" },
                		      { "color": "#000000" }
                		    ]
                	 },
                	 {
                         "featureType": "water",
                         "elementType": "labels.text.stroke",
                         "stylers": [
                           { "visibility": "on" },
                           { "color": "#333333" }
                         ]
                     },
                     {
                         "featureType": "water",
                         "elementType": "labels.text.fill",
                         "stylers": [
                           { "visibility": "on" },
                           { "color": "#ffffff" }
                         ]
                     },
                     {
                         "featureType": "landscape",
                         "elementType": "geometry",
                         "stylers": [
                           { "visibility": "on" },
                           { "color": "#333333" }
                         ]
                     },
                     {
                    	    "featureType": "administrative.country",
                    	    "elementType": "geometry",
                    	    "stylers": [
                    	      { "visibility": "on" },
                    	      { "invert_lightness": true }
                    	    ]
                     },
                     {
                    	    "featureType": "administrative.locality",
                    	    "elementType": "geometry",
                    	    "stylers": [
                    	      { "visibility": "on" },
                    	      { "invert_lightness": true }
                    	    ]
                     },
                     {
                    	    "featureType": "administrative.locality",
                    	    "elementType": "labels",
                    	    "stylers": [
                    	      { "invert_lightness": true }
                    	    ]
                      },
                      {
                          "featureType": "administrative.country",
                          "elementType": "labels",
                          "stylers": [
                            { "invert_lightness": true }
                          ]
                      },
                      {
                    	    "featureType": "administrative.province",
                    	    "elementType": "labels",
                    	    "stylers": [
                    	      { "invert_lightness": true }
                    	    ]
                    	  }
                      
                	];
    
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    
    map.setOptions({styles: styles});
    
    var gradient = [
      'rgba(255,0,0,0)',
      'rgba(255,128,128,1)',
      'rgba(255,255,0,1)',
      'rgba(255,255,255,1)',
                    ];
    
    
    var heatmap = new google.maps.visualization.HeatmapLayer({
    	  data: heatmapData,
    	  dissipating: false,
    	  gradient: gradient,
    	  radius: 2,
    	  opacity: .9,
    	});
    heatmap.setMap(map);
  }

 </script>   
 <script type="text/javascript" src="/javascript/jquery-latest.js"></script>
 <script type="text/javascript" src="/javascript/jquery.lightbox_me.js"></script>
 <script type="text/javascript">
 
    var base_url = "http://localhost:8000/account/";
    //var base_url = "http://myjobpole.appspot.com/account/";
    var map;
    
    var currLatti;
    var currLongi;
    
    function singleMark(zipcode){
      
      next_url = base_url + 'geoPosRequest/';
      
      $.post(next_url,
              {pos:zipcode},
              function (data){         
                $('#msgBox').show();     
                status = data.status;
                $('#msgBox').html('adding marker: ' + zipcode + " google status:" + status);
                var lati = data.results[0].geometry.location.lat;
                var longi = data.results[0].geometry.location.lng;
                var typeSearch = data.results[0].geometry.location_type;
                
                addMarker(lati,longi,zipcode);           
                
                // cleanup
                $('#marker').attr('value','');
                $('#marker').focus();
                
              },
              "json");

      
      
      
    }
    
  $(document).ready(function(){
    // include your code here
     //initialize();
  
  });
 </script>
 <title>Heatmap layer example</title>
</head>
<body onLoad="initialize();">
  <h1>Heatmap Layer Example </h1>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>